<template>
  <view class="handy-buy">
    <view class="header">
      <v-icon size="60rpx" src="@/static/icons/handy-buy.svg" />
      <view class="title">
        顺手买一件
      </view>
    </view>
    <swiper class="product-swiper" next-margin="22rpx">
      <swiper-item v-for="item in list" :key="item" style="height: 200rpx">
        <view class="product-item" @click="selectHandle(item)">
          <v-image
            height="160rpx"
            width="160rpx"
            border-radius="16rpx"
            :src="item.spu_image"
          />
          <view class="product-info">
            <view class="product-name">
              {{ item.spu_name }}
            </view>
            <view class="product-content">
              <view class="product-spec">
                {{ item.spec_info.map((i) => i.value).join('; ') }}
              </view>
              <view class="product-checkbox">
                <wd-checkbox
                  :model-value="
                    modelValue?.some((i) => i.sku_id === item.sku_id)
                  "
                />
              </view>
            </view>
            <view class="product-price">
              <v-price size="32rpx" :price="item.handy_price" />
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue?: HandySkuVO[];
  list: HandySkuVO[];
}>();

const emits = defineEmits<{
  'update:model-value': [val: HandySkuVO[]];
}>();
const selectHandle = (sku: HandySkuVO) => {
  if (!props.modelValue?.some((item) => item.sku_id === sku.sku_id)) {
    // const list = props.modelValue ? [...props.modelValue, sku] : [sku];
    emits('update:model-value', [sku]);
  } else {
    const list = props.modelValue?.filter(
      (item) => item.sku_id !== sku.sku_id
    );
    emits('update:model-value', list);
  }
};
</script>

<style lang="scss" scoped>
.handy-buy {
  padding: 30rpx;
  margin: 24rpx 24rpx 0;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  .header {
    height: 60rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;
    .title {
      font-size: 32rpx;
    }
  }
  .product-item {
    height: 200rpx;
    width: 574rpx;
    box-sizing: border-box;
    padding: 20rpx;
    border-radius: 16rpx;
    background-color: #f5f6fa;
    display: flex;
    align-items: stretch;
    gap: 20rpx;
    .product-info {
      flex: 1;
      overflow: hidden;
      display: flex;
      align-items: stretch;
      flex-direction: column;
      gap: 3rpx;
      .product-name {
        font-size: 30rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
      .product-content {
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        gap: 6rpx;
        .product-spec {
          font-size: 24rpx;
          line-height: 1.1;
          color: #666666;
          flex: 1;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          line-clamp: 3;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
        }
        .product-checkbox {
          width: fit-content;
          flex-shrink: 0;
          --wot-checkbox-label-margin: 0;
        }
      }
    }
  }
}
</style>
